<template>

  <el-card class="search-user">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="userId" placeholder="请输入用户ID" clearable />
      </el-col>
      <el-col :span="12">
        <el-button type="primary">查询</el-button>
      </el-col>
    </el-row>
    <el-divider />
    <el-button type="primary" @click="addUser">+新建账号</el-button>
    <el-table :data="users" :row-class-name="userListRowClassName" table-layout="auto">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="role_name" label="角色" />
      <el-table-column prop="mg_state" label="状态">
        <template #default="scope">
          <el-switch v-model="scope.row.mg_state" class="ml-2" active-color="#13ce66" inactive-color="#ff4949" />
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.username)" type="primary">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
    v-model:currentPage="UserListParameter.pagenum"
    :total="usersData.total"
    v-model:pageSize="UserListParameter.pagesize"
    :loadList="getUserList"
    />
  </el-card>

  <user-form-vue />

</template>

<script setup lang="ts">
import { reqUserList } from '@/api/users'
import { onBeforeMount, reactive, ref } from 'vue'
import { IUserListParameter, IUser, IUsers } from '@/api/users/types'
import { computed } from '@vue/reactivity'
import userFormVue from './userForm.vue'
const dialogVisible = ref(false)
const addUser = () => {
  dialogVisible.value = true
}
const userId = ref()
const UserListParameter = reactive<IUserListParameter>({
  query: '',
  pagenum: 1,
  pagesize: 3
})
const users = ref<Array<IUser>>([])
// const users = reactive<IUsers>({
//   total: 4,
//   pagenum: 1,
//   users: []
// })
const usersData: IUsers = reactive({
  total: 3,
  pagenum: 1,
  users: []
})

console.log(typeof (usersData), 'userData_typeof')
const getUserList = async () => {
  const result = await reqUserList(UserListParameter)

  if (result.meta.status === 200) {
    users.value = result.data.users
    usersData.total = result.data.total
    usersData.users = result.data.users
    console.log(typeof (result.data), 'result')
  }
}

getUserList()
console.log(usersData, 'usersData')
console.log(users.value, 'users')

const userListRowClassName = ({
  row,
  rowIndex
}: {
  row: IUser
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const handleEdit = (a) => {
  console.log(a)
}
const handleDelete = (a) => {
  console.log(a)
}
const handleSizeChange = () => {
  getUserList(UserListParameter)
}
const handleCurrentChange = () => {
  getUserList(UserListParameter)
}
</script>

<style scoped>
.search-user {
  margin: 0;
  position: relative;
  left: 0px;
}

.user-list-content {
  margin-top: 20px;
}
</style>
